@require('./variables.styl');

.k-dialog-wrapper
    position absolute
    z-index $max-z-index 
    top 0
    left 0
    width 100%
    // overlay
    .k-overlay
        position fixed
        top 0
        left 0
        width 100%
        height 100%
        background #000
        opacity 0.5 
        transition opacity $transition 
        // overlay animation
        &.animate-enter
        &.animate-leave
            opacity 0

.k-dialog
    position absolute 
    width $dialog-width 
    border-radius $dialog-border-radius 
    background $dialog-bg-color 
    font-size $dialog-font-size
    color $dialog-color
    max-width 100%

    // header
    .k-header
        padding 0 $dialog-padding
        border-bottom $dialog-title-border 
        position relative
        .k-title
            height $dialog-title-height
            line-height $dialog-title-height
            font-size $dialog-title-font-size
            color $dialog-title-color
        .k-close
            position absolute
            right $dialog-close-right 
            top $dialog-close-top 
            &.k-btn
                .k-icon 
                    font-size $dialog-close-icon-font-size

    // body
    .k-body
        padding $dialog-body-padding

    // footer
    .k-footer
        text-align right
        padding $dialog-footer-padding
        .k-btn
            margin-left $dialog-footer-btn-margin 

    // drag
    &.k-dragging
        cursor default
        user-select none

    // animation
    &.animate-enter-active
    &.animate-leave-active
        transition all $transition
    &.animate-enter
    &.animate-leave
        transform $dialog-transform 
        opacity 0

    // size
    for size in large small mini
        &.k-{size}
            width lookup('$dialog-' + size + '-width')


require($theme-dir + '/dialog.styl')
